Angular Material ইন্সটল করার পরে এটি সঠিকভাবে কাজ করার জন্য প্রয়োজনীয় কনফিগারেশন সম্পন্ন করতে হয়। Angular Material কনফিগার করা মানে অ্যাপ্লিকেশনে ম্যাটেরিয়াল ডিজাইনের থিম, অ্যানিমেশন, এবং প্রয়োজনীয় মডিউল যুক্ত করা। নিচে Angular Material কনফিগার করার বিস্তারিত ধাপগুলো উল্লেখ করা হলো।

থিম কনফিগারেশন

Angular Material একটি pre-built theme সরবরাহ করে, যা স্বয়ংক্রিয়ভাবে ইন্সটল প্রক্রিয়ার সময় যুক্ত হয়। আপনি যদি নিজের থিম কাস্টমাইজ করতে চান, তবে থিম ফাইল কনফিগার করতে হবে।

থিম ফাইল যোগ করা

angular.json ফাইলের styles সেকশনে থিম ফাইল যুক্ত করুন:

"styles": [
  "src/styles.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]

প্রি-বিল্ট থিম অপশন

Angular Material এর প্রি-বিল্ট থিমগুলোর মধ্যে রয়েছে:

• Indigo/Pink: indigo-pink.css (ডিফল্ট থিম)
• Deep Purple/Amber: deep-purple-amber.css
• Pink/Blue Grey: pink-bluegrey.css
• Purple/Green: purple-green.css

আপনার পছন্দমতো থিম যুক্ত করতে পারেন।

অ্যানিমেশন কনফিগারেশন

Angular Material এর অ্যানিমেশন ফিচার সঠিকভাবে কাজ করার জন্য BrowserAnimationsModule ইমপোর্ট করা আবশ্যক।

app.module.ts ফাইলে ইমপোর্ট:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

অ্যানিমেশন বন্ধ করতে চাইলে:

অ্যানিমেশন বন্ধ করতে NoopAnimationsModule ইমপোর্ট করুন:

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    NoopAnimationsModule
  ]
})
export class AppModule { }

Material Modules ইমপোর্ট করা

Angular Material এর কম্পোনেন্ট ব্যবহার করতে প্রয়োজনীয় Material Modules ইমপোর্ট করতে হবে। উদাহরণস্বরূপ:

app.module.ts ফাইলে ইমপোর্ট:

import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatButtonModule,
    MatInputModule
  ]
})
export class AppModule { }

প্রয়োজনীয় কিছু Material Module:

• Button Module: MatButtonModule
• Form Field Module: MatFormFieldModule
• Input Module: MatInputModule
• Dialog Module: MatDialogModule
• Table Module: MatTableModule

Typography এবং Icon কনফিগারেশন

Material Typography

Angular Material এর typography সাপোর্ট অ্যাক্টিভ করতে হলে এটি আপনার অ্যাপ্লিকেশনে যুক্ত করতে হবে।

"styles": [
  "src/styles.css",
  "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]

Material Icons

Angular Material এর Icon সাপোর্টের জন্য index.html ফাইলে Google Material Icons এর লিঙ্ক যোগ করুন:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

কাস্টম থিম তৈরি করা

Angular Material কাস্টম থিম তৈরি করার জন্য SCSS ফাইল ব্যবহার করা হয়। এটি থিমের রং এবং স্টাইল কাস্টমাইজ করতে দেয়।

একটি SCSS ফাইল তৈরি করুন:

src/styles.scss ফাইল তৈরি করে নিম্নলিখিত কোড লিখুন:

@import '~@angular/material/theming';

@include mat-core();

// Primary এবং Accent রং সেট করা
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink);

$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
  )
));

// থিম অ্যাপ্লাই করুন
@include angular-material-theme($theme);

angular.json ফাইলে SCSS ফাইল যুক্ত করুন:

"styles": [
  "src/styles.scss"
]

Material Design Fonts এবং Styles

Angular Material এর সাথে ম্যাটেরিয়াল ডিজাইন ফন্ট ব্যবহার করতে Google Fonts এর লিঙ্ক যুক্ত করুন:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">

Angular Material কনফিগার করার পরে আপনি এটি দিয়ে দ্রুত এবং আধুনিক UI তৈরি করতে পারবেন। সঠিক কনফিগারেশন অ্যাপ্লিকেশনকে আরও কার্যকর এবং ব্যবহারকারীবান্ধব করে তোলে।